import React, { Component } from 'react';
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import Wheaders from '../../components/Headers';
import { WindManUtils } from '../../util/utils';
import md5 from 'md5';
import Http from '../../util/http';
import './index.less';

class Login extends Component {

    render() {

        const layout = {
                labelCol: {
                    xs: { span: 8 },
                    sm: { span: 8 },
                },
                wrapperCol: {
                    xs: { span: 16 },
                    sm: { span: 16 },
                },
            };
        return (
            <div className='education-login'>

                <Wheaders left={'返回'} middle={'登录'} right={'首页'} />
                <div className={'login'}>
                    <Form
                        {...layout}
                        name='normal_login'
                        className='login-form'
                        onFinish={this.handleFinish.bind(this)}
                        >
                        <Form.Item
                            name='username'
                            label='手机号'
                            rules={[{ required: true, message: '请输入你的账号' }]}
                        >
                            <Input prefix={<UserOutlined className='site-form-item-icon' />} placeholder='请输入你的账号' />
                        </Form.Item>
                        <Form.Item
                            name='password'
                            label='密码'
                            rules={[{ required: true, message: '请输入你的密码' }]}
                        >
                            <Input
                            prefix={<LockOutlined className='site-form-item-icon' />}
                            type='password'
                            placeholder='请输入密码'
                            />
                        </Form.Item>

                        <Form.Item style={{ textAlign: 'center' }}>
                            <Button type='primary' htmlType='submit' className='login-form-button' style={{ marginRight: '8px' }}>
                                登录
                            </Button>
                             <Button onClick={ () => {
                                this.props.history.push('/register');
                            }}>注册</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }

    UNSAFE_componentWillMount() {

    }

    handleFinish (values) {
        Http.get('/LoginReg/getVcode', { phone: values.username }).then( res => {
            Http.post('/LoginReg/login', { phone: values.username, hashPwd: md5(md5(values.password) + res.resultData.vcode) }).then( res => {

                message.success('登陆成功', 1, () => {
                    WindManUtils.setStorage('user_info', res.resultData);
                    this.props.history.push('/');
                })
            });
        } )
    }
}
export default Login;


